<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="example">
    <my-component></my-component>
    为什么组件之间的同学选择vuex
    <pre>
        但是在vue2.0中$dispatch 和 $broadcast被弃用，因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱,并且这<b>只适用于父子组件间的通信。</b>
        官方给出的最简单的升级建议是使用集中的事件处理器,而且也明确说明了 一个空的vue实例就可以做到,因为Vue 实例实现了一个事件分发接口在vue2.0中在初始化vue之前，
        给data添加一个 名字为eventhub 的空vue对象
    </pre>
</div>
<script src="../js/vue.min.js"></script>
<script src="../js/vuex.js"></script>
<script>
    const store = new Vuex.Store({
        state: {
            message: "11"
        },
        mutations: {
            setmsg: function (state, msg) {
                state.message = msg
            }
        },
        actions: {
            setdata (context, msg) {
                context.commit('setmsg', msg)
            }
        },
        getters: {
            getmessage: function (state) {
                return state.message
            }
        }
    })


    //省略extend方法，vue内部调用
    Vue.component('my-component', {
        //模板里不支持驼峰的属性写法，需要转换为‘-’连接的属性写法
        data: function () {
            return {
                parentMsg: 'prop传值'
            }
        },
        computed: {
            getterMsg () {
                return store.getters.getmessage
            }
        },
        methods: {
            hanget: function (data) {
                this.tt = data
            },
            ts: function () {
                alert("sdfsd")
            }
        },
        template: '<div>' + '<input v-model="parentMsg"><br>我显示的位置是在父组件中：{{getterMsg}}' + '<br>' + '<child-component :gedata="parentMsg"></child-component><child-component2></child-component2>' + '</div>',
        components: {
            'child-component': {
                props: ['gedata'],
                template: '<div>{{msg}}</div>',
                mounted: function () {
                    this.joinString()
                },
                updated: function () {
                    this.joinString()
                },
                data: function () {
                    return {
                        msg: 'Hello, vue router!'
                    }
                },
                methods: {
                    joinString: function () {
                        this.msg = "我是走子组件中走了一圈回来的数据：" + this.gedata;
//                        store.commit('setmsg',this.msg)
                        store.dispatch('setdata', this.msg)
                    }
                }

            },
            'child-component2': {
                template: '<div>我是末班二号</div>'
            }
        }
    });
    // 创建根实例1
    var app = new Vue({
        el: '#example',
        data: {
            a: 1
        },
        created: function () {
            // `this` 指向 vm 实例  vm==data
            console.log('a is: ' + this.a)
        }
    });
</script>
</body>
</html>